<template>
  <div class="c-w100 recommend_wrap c-ph22 c-pv20">
    <!-- 我的收益 -->
    <div class="c-w100">
      <div class="c-bg-FFF8F5 c-br10 c-pb30 c-p">
        <div @click="handleClickMyEarning" class="recommend_earnings c-ww272 c-hh52 c-fs32 c-flex-row c-aligni-baseline c-justify-center c-fw600">我的收益
          <i class="iconfont c-fs28 c-fc-FF300C c-ml10">&#xe669;</i>
        </div>
        <div @click="handleClickCommission" class="c-flex-row c-flex-center c-fs24 c-fw600 c-fc-sblack c-mt44">佣金收益
          <span class="c-ml10 c-fw400">(元)</span>
          <i class="c-fs28 iconfont c-fc-gray c-ml10">&#xe669;</i>
        </div>
        <div class="c-flex-row c-flex-center c-fs52 c-fc-F4223B c-fw600 c-mt30" v-if="myProfit != null">{{myProfit.recommendAmount}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-mt30">
          <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickMyIntegral">
            <div class="c-fs22 c-fc-sblack">
              <span>{{customPointName}}</span>
              <span class="iconfont c-fs22">&#xe635;</span>
            </div>
            <div class="c-fs32 c-fc-xblack c-fw600 c-mt10" v-if="myProfit != null">{{myProfit.totalPoints}}</div>
          </div>
          <div class="c-flex-column c-flex-1 c-flex-center" @click="handleClickValueVoucher">
            <div class="c-fs22 c-fc-sblack">
              <span>优惠劵</span>
              <span class="iconfont c-fs22">&#xe635;</span>
            </div>
            <div class="c-fs32 c-fc-xblack c-fw600 c-mt10" v-if="myProfit != null">{{myProfit.totalRedeemCode}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- title -->
    <div class="c-w100 c-mt30">
      <div class="c-fs22 c-fc-white c-flex-row c-aligni-baseline">
        <span class="c-fs26 c-fw600">收益历史</span>
        <span class="c-ml12">此页面展示的收益仅来自于好友下单有礼活动</span>
      </div>
    </div>
    <!-- list -->
    <div class="c-w100 c-mt20" :class="dataStatus == 'NO_DATA' ? 'c-bg-FFF8F5 c-br10':''">
      <div class="c-bg-FFF8F5 c-ph20 c-pv24 c-br12 c-mb20" v-for="(item, index) in profitLogList" :key="index">
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <p class="c-fs24 c-fw600 c-fc-xbalck c-text-ellipsis1">推荐{{item.peopleCount}}人下单，获得
            <span v-if="item.uiId > 0">￥{{item.amount}}佣金</span>
            <span v-if="item.rrId > 0">达标礼包</span>
          </p>
          <i class="iconfont c-rotate90" v-if="item.rrId > 0 && item.equityList != null && item.equityList.length > 0" :class="item.isShow ? 'c-rotate270':'c-rotate90'" @click="handleClickSelect(index)">&#xe635;</i>
        </div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-pt18 " :class="item.isShow ? 'c-pb18 c-bd-b1':''">
          <p class="c-fs22 c-fc-sblack c-text-ellipsis1">{{item.createdAt}}</p>
          <div class="c-flex-row c-flex-center c-fs20 c-fw600 c-fc-white c-br18 c-ph12 c-hh36 " v-if="item.uiId > 0" :class="item.status == 1 ?'c-bg-ccc':'c-bg-ff4323'">{{item.status == 1 ? '已结算':'待结算'}}</div>
        </div>
        <div class="c-fs22 c-fc-sblack c-pt16" v-show="item.rrId > 0 && item.isShow && item.equityList != null && item.equityList.length > 0">{{item.equityList != null && item.equityList.join('/')}}</div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无结果" :pt20="'true'" :dataStatusText="'c-fc-white'"></loading-status-tem>
    </div>
  </div>
</template>
<script>
  import { utilJs } from "@/utils/common.js";
  import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
  let LIMIT = 10;
  let page = 1;
  let pageIndex = 0;
  export default {
    name: 'RecommendProfit',
    components: {
      loadingStatusTem
    },
    data() {
      return {
        customPointName: localStorage.getItem("customPointName"),
        myProfit: null,
        dataStatus: 'HAS_MORE_DATA',
        profitLogList: []
      }
    },
    watch: {
      profitLogList() {
        this.profitLogList.forEach((item, i) => {
          this.$set(this.profitLogList[i], 'isShow', false);
        });
      },
    },
    mounted() {
      setDocumentTitle("我的收益");
      this.recId = this.$route.query.recId || '';
      this.rpId = this.$route.query.rpId || '';
      this.myProfit = null;
      this.dataStatus = 'HAS_MORE_DATA';
      LIMIT = 10;
      page = 1;
      pageIndex = 0;
      this.profitLogList = []
      this.myProfitLog();
      window.addEventListener('scroll', this.windowScrollFunction);
    },
    methods: {
      handleClickMyIntegral() {
        this.$routerGo(this, 'push', {
          path: '/member/myIntegral/integralDetail'
        })
      },
      handleClickValueVoucher() {
        this.$routerGo(this, 'push', {
          path: '/member/myValueVoucher/myValueVoucher'
        })
      },
      handleClickCommission() {
        let freezeAmount = this.myProfit.freezeAmount;
        this.$cjConfirm({
          title: '累计佣金', //
          titleCenter: true, //标题是否居中
          message: `1.累计金额包含待结算金额${freezeAmount},可在个人中心-账户提现。</br>2.推广金额过了冻结期,对应的佣金可提现。`,
          messageCenter: false, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: false, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '好的', //确认按钮文本
          color: 'linear-gradient(0deg, #FF300C 0%, rgba(255, 48, 12, 0.7) 100%)',
          onConfirm() {
          },
          onCancel() {
          },
        })
      },
      // 我的收益
      handleClickMyEarning() {
        this.$cjConfirm({
          title: '我的收益', //
          titleCenter: true, //标题是否居中
          message: '我的收益包括所有参与过推荐好友支付获得的收益',
          messageCenter: false, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: false, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '好的', //确认按钮文本
          color: 'linear-gradient(0deg, #FF300C 0%, rgba(255, 48, 12, 0.7) 100%)',
          onConfirm() {
          },
          onCancel() {
          },
        })
      },
      myProfitLog() {
        if (this.dataStatus == 'LOADING') {
          return;
        }
        this.dataStatus = 'LOADING';
        utilJs.getMethod(global.apiurl + `activity/recommend/myProfitLog?page=${page}&index=${pageIndex}&limit=${LIMIT}&recId=${this.recId}&rpId=${this.rpId}`, res => {
          console.log(res)
          this.myProfit = res.myProfit;
          if (page == 1) {
            this.profitLogList = res.logs.data
          } else {
            this.profitLogList = [...this.profitLogList, ...res.logs.data]
          }
          if (res.logs.data && (res.logs.data.length < LIMIT)) {
            this.dataStatus = page == 1 && res.logs.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex += LIMIT;
            page++;
          }
        })
      },
      windowScrollFunction() {
        utilJs.handleLoading(() => {
          if (this.dataStatus == 'HAS_MORE_DATA' && this.profitLogList.length > 0) {
            this.myProfitLog();
          }
        });
      },
      handleClickSelect(index) {
        if (this.profitLogList[index].isShow == false) {
          this.$set(this.profitLogList[index], 'isShow', true);
        } else {
          this.$set(this.profitLogList[index], 'isShow', false);
        }
      },
    }
  }
</script>

<style lang="less" scoped>
.c-fc-FF4323 {
  color: #FF4323;
}
.c-fc-FF300C {
  color: #FF300C;
}
.c-fc-FF2F0B {
  color: #FF2F0B;
}
.c-fc-F4223B {
  color: #F4223B;
}
.c-bg-ff4323 {
  background: #ff4323;
}
.c-bg-FFF8F5 {
  background: #FFF8F5;
}
.recommend_wrap {
  background: #FA704E;
  .recommend_earnings {
    background: url("../../../assets/i/wap/recommend/recommend_earnings.png") no-repeat center center;
    background-size: contain;
    color: #FF4323;
  }
}
</style>